<template>
  <div class="timeline">
    <el-timeline>
      <el-timeline-item v-for="(item, index) in activities" :key="index" :timestamp="item.createTime" :type="item.type" placement="top">
        <el-card>
          <h4>{{item.statgeName}}</h4>
          <div class="descimgBox">
            <!-- <viewer :images="item.busFilesList" class="descimgBox"> -->
            <div v-for="(v, index) in item.busFilesList" :key="index" class="imgbox" v-viewer ref="viewer" v-if="show">
              <img style="width: 100px; height: 100px;cursor: pointer;" class="image" :src="v.url" :title="v.originName" />
              <div class="icon">
                <i class="el-icon-zoom-in" style="color:white;margin:0px 5px" @click="lookImg(index)"></i>
                <i class="el-icon-download" style="color:white;margin:0px 5px" @click="imgupload(v)"></i>
              </div>
            </div>
            <!-- </viewer> -->
          </div>

          <!-- </span> -->
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import ViewImage from '../../../components/viewImage.vue'
export default {
  name: 'timeline',
  components: { ViewImage },
  props: {
    ImageList: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      activities: [],
      show: true,
      // 传递的参数
      companyPreview: {
        imgList: [], // 所有图片数组
        index: 0, // 当前点击的图片的索引
        infinite: false,  // 是否可以循环切换
        popup: false // 弹窗的显示隐藏
      },
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    lookImg(index) {
      const viewer = this.$refs['viewer'][index].$viewer
      viewer.show()
    },
    imgupload(row) {
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = row.url
      // 生成时间戳
      // let timestamp = new Date().getTime()
      link.download = row.originName
      document.body.appendChild(link)
      link.click()
    },
    /**组件初始化方法 */
    init(data) {
      this.activities = data ? data : this.ImageList
      this.activities.map(item => {
        // this.companyPreview.popup = true;
        // this.companyPreview.imgList = item.busFilesList.map(item=>item.url)
        item['type'] = 'primary'
      })
    },
  }
}
</script>

<style lang="scss">
.descimgBox {
  display: flex;
  flex-wrap: wrap;
  .imgbox {
    width: 100px;
    margin-right: 5px;
    position: relative;
  }
  .imgbox:hover {
    .icon {
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      font-size: 18px;
      font-weight: 400;
      cursor: pointer;
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 0px;
    }
  }
}
</style>